<template>
    <div class="box1">
            <figure v-for="fyxinxi in fyxinxis" :key="fyxinxi.id">
        <img :src="fyxinxi.img" />
        <div class="nyou">
          <div class="shang">{{ fyxinxi.title }}</div>
          <div class="zhong">{{ fyxinxi.name }}</div>
          <div class="xia">
            <span>{{ fyxinxi.renshu }}</span>
            <p class="bm">报名</p>
          </div>
        </div>
      </figure>


    </div>
</template>
<script>
export default {

    data(){
        return {
     
          fyxinxis:[]
        }
    },
    created(){
        let xhr = new XMLHttpRequest();
        xhr.open("get","http://localhost:3000/fyxinxis",true);
        xhr.onreadystatechange = ()=>{
            // xhr.reayState==4: 表示请求响应的过程完毕。
            // xhr.status==200 ：后端响应了正常的数据（响应没有问题）
            if(xhr.readyState==4 && xhr.status==200){
                console.log("xhr.responseText",xhr.responseText);
                this.fyxinxis = JSON.parse(xhr.responseText);
            }
        }
        xhr.send();
    }    
}
</script>


<style scoped>



 /* .box1 figure{
    display: flex;
    flex-direction: column;
    align-items: left;
    width:3.2rem ;
    border-bottom: 1px solid #f7f7f7;
} */
 .box1   figure{
    display: flex;
    width:3.4rem ;
    height: 1rem;
border: 1px solid #c2bebe;
border-radius: 5px;

}
 .box1  img{
    width: 0.76rem;
}
 .box1 .nyou{
    padding: 0.15rem;
    width: 2.6rem;
}
 .box1   .shang{
    font-size: 0.15rem;
}


 .box1 .zhong{
font-size: 0.12rem;
width: 0.85rem;
height: 0.2rem;
text-align: center;
color: #e0cf34f8;
background-color: #fdfdf5;
margin: 0.05rem  0;
}
 .box1 .xia{
    height: 0.25rem;
    display: flex;
    justify-content: space-between;
line-height: 0.25rem;
}
 .box1 .xia span{
font-size: 0.1rem;
color: #c5c1c1;
}
 .box1 .xia .bm{
    width:0.55rem ;
    height:0.25rem;
    background-color:#f4f4f6;
    border-radius: 0.2rem;
  color: red;
  font-size: 0.14rem;
  text-align: center;
}




</style>


